<!-- 盘点扫描 -->
<template>
  <!-- 顶部标题 -->
  <view class="Login">
    <!-- 顶部标题栏 -->
    <TopBar title="盘点扫描"></TopBar>

    <!-- 作业页面 -->
    <view v-show="activeTab === 0">

      <!-- 输入区 -->
      <view class="function">

        <view class="function-input">
          <view style="font-size: 15px; padding-left: 20px; display: flex; ">
            <text >盘点扫描：</text>

            <text >123143214212</text>

          </view>

          <sanheyiCopy title1="仓库" v-model:input1="input1" :isShowcheckbox1="true"
            v-model:checkboxvalue="checkbox1" :isShowbutton1="true"></sanheyiCopy>
          <sanheyiCopy title1="仓位" v-model:input1="input2" :isShowcheckbox1="true"
            v-model:checkboxvalue="checkbox2" :isShowbutton1="true"></sanheyiCopy>
          <sanheyiCopy  title1="物料" v-model:input1="input3" :isShowcheckbox1="true"
           :isShowbutton1="true"></sanheyiCopy>
          <sanheyiCopy title1="数量" v-model:input1="input4"></sanheyiCopy>
        </view>
      </view>

      <!-- 下面显示查询结果内容区域 -->
      <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y"
        style=" margin-top: 20px; background-color: antiquewhite;">
        <WarehouseInquiry></WarehouseInquiry>
      </scroll-view>
      <!-- 三个按钮 -->
      <view v-show="activeTab === 0" class="bottom-button">
        <button class="bottom-button-ok">确定</button>
        <button class="bottom-button-reset">重置</button>
        <button class="bottom-button-submit" >提交</button>
      </view>
      <!-- 中间文字 -->
      <view v-show="activeTab === 0" class="bottom-text"><text>注意：仓库/仓位的勾选框为保留输入框数据功能</text></view>
      
    </view>

    <!-- 待处理页面 -->
    <view v-show="activeTab === 1" style="display: none; align-items: center; justify-content: center;">
      <Pending @clearAll="clearAll"> 
        <template #material>
          <view>
          <!-- w物料 -->
        <view class=" top-list-title-gongyi" v-for="i in list" :key="i">


          <view class="top-list-title-item-gongyi-title">
            <view class="top-list-title-item-title">
             <text style="color: blue;"> 33124324212</text>
            </view>
            <view class="top-list-title-item-title">
              <button style="width: 50%;height: 100%;">作业</button>
            </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: green;">
              编码：
            </view>
            <view class="top-list-title-item-title-gongyi-right">122542312221</view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: red;">
              名称：
            </view>
            <view class="top-list-title-item-title-gongyi-right">纪念章飞往 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: yellow;">
              批次
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 34123 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>

            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>
          </view>

        </view>
          </view>
        </template>

        <template #barcode>
          <view>
              <!-- 条码 -->
        <view class=" top-list-title-gongyi" v-for="i in list" :key="i">

          <view class="top-list-title-item-gongyi-title">
            <view class="top-list-title-item-title">
             <text style="color: blue;"> 33124324212</text>
            </view>
            <view class="top-list-title-item-title">
              <button style="width: 50%;height: 100%;">作业</button>
            </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: green;">
              编码：
            </view>
            <view class="top-list-title-item-title-gongyi-right">122542312221</view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: red;">
              名称：
            </view>
            <view class="top-list-title-item-title-gongyi-right">纪念章飞往 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: yellow;">
              批次
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 34123 </view>
          </view>
          <view class=" top-list-title-item-gongyi">
            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>

            <view class="top-list-title-item-title-gongyi-left" style="color: blue;">
              数量：
            </view>
            <view class="top-list-title-item-title-gongyi-right"> 144 </view>
          </view>

        </view>
          </view>
        </template>

      </Pending>
    </view>

    <!-- 查询页面 -->
    <view v-show="activeTab === 2" style="display: none; align-items: center; justify-content: center;">
      <QueryPage></QueryPage>
    </view>

    <!-- 底部区域 -->
    <view class="bottom">
     <!-- 底部导航 -->
      <view class="bottom-nav">
        <view class="bottom-nav-title" :class="{ 'active': activeTab === 0 }"
          :style="{ color: activeTab === 0 ? '#000' : '#fff', backgroundColor: activeTab === 0 ? '#a5a7a4' : '#caccc9' }"
          @click="handleTabClick(0)">作业</view>
        <view class="bottom-nav-title" :class="{ 'active': activeTab === 1 }"
          :style="{ color: activeTab === 1 ? '#000' : '#fff', backgroundColor: activeTab === 1 ? '#a5a7a4' : '#caccc9' }"
          @click="handleTabClick(1)">待处理</view>
        <view class="bottom-nav-title" :class="{ 'active': activeTab === 2 }"
          :style="{ color: activeTab === 2 ? '#000' : '#fff', backgroundColor: activeTab === 2 ? '#a5a7a4' : '#caccc9' }"
          @click="handleTabClick(2)">查询</view>
      </view>
    </view>
    <!-- 弹出查询窗口 -->
    <view>

      <uni-popup ref="popup" background-color="#fff" @touchstart.native.passive :animation="true">
        <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
          <!-- <HouseSelect></HouseSelect> -->
          <!-- <component  :is="currentComponent" /> -->
          <HouseSelectIocation></HouseSelectIocation>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue"
//引入仓库查询
import HouseSelect from '@/components/HouseSelect.vue'
import HouseSelectIocation from '@/components/HouseSelectIocation.vue'

// 4. 控制当前显示的组件
let currentComponent = ref('HouseSelect')

// 引入三合一组件
import sanheyiCopy from '@/components/sanheyi copy.vue'

//引入仓库查询结果组件
import WarehouseInquiry from '@/components//House/WarehouseInquiry.vue'

//引入待处理页面
import Pending from '@/components/House/Pending.vue'
//引入查询页面
import QueryPage from '@/components/House/QueryPage.vue'

let type = ref<string>("");
const popup = ref<boolean>(false);
// ✅ 正确：声明为 uni-popup 组件的类型
const openpPpup = (componentName: string) => {
  // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
  (popup.value as any).open("bottom")
  currentComponent.value = componentName;
};

// 输入框的值
let input1 = ref<string>("");
let input2 = ref<string>("");
let input3 = ref<string>("");
let input4 = ref<string>("");

//单选框
let checkbox1 = ref<boolean>(false); // 
let checkbox2 = ref<boolean>(false); // 
let checkbox3 = ref<boolean>(false); // 

//模拟数据条数
const list=ref(6)
//待处理一键清除
const clearAll = () => {
 list.value=0
}


// 添加响应式数据跟踪当前选中的导航项
// 0: 作业, 1: 待处理, 2: 查询
const activeTab = ref(0);

/**
 * 导航项点击事件处理函数
 * @param {number} index - 被点击的导航项索引
 * @returns {void}
 */
const handleTabClick = (index: number) => {
  // 更新当前选中的导航项
  activeTab.value = index;
  console.log(index)
};



</script>






<style scoped>
.Login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* margin-top: 40px; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  /* align-items: center; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  /* justify-content: center; */
  min-height: 100vh;
  background-color: #F7F3F1;
  /* background-image: url("/src/static/log/Loginbg3.png"); */
  background-size: 100% 100%;
}


/* 功能区 */
.function {
  background-color: #F7F3F1;
  width: 100%;
  /* min-height: 100vh; */



}

.function-input {
  width: 100%;
  background-color: #FFFFFF;
  border-radius: 0 0 30px 30px;
  padding: 5px 0px;
}

.function-input1 {
  padding: 2px 10px;
  display: flex;
  height: 45px;
}



.function-input1-checkbox {
  transform: scale(1.2);
  margin: 7px;

}

.function-input1-checkbox-box {
  height: 50px;
  width: 43px;
}

.function-input1-text {
  font-size: 20px;
  color: #333;
  margin-top: 5px;
  margin-right: 15px;
  min-width: 40px;
}

.uni-input {
  font-size: 20px;
  width: 53%;
  height: 40px;
  border: 1px solid #000;
  border-radius: 20px;
  padding-left: 20px
}

.function-input1-buttonview {
  display: flex;
  width: 50px;
  height: 40px;
  margin-left: 10px;
  justify-content: center;

}

.function-input1-button {
  width: 50px;
  height: 40px;
  background-color: #F7F3F1;
  border-radius: 10px;
  background-color: dodgerblue;
  color: #FFFFFF;
}

.function-input1-button1 {
  font-size: 15px;
  line-height: 38px;
  display: flex;
  justify-content: center;
}

/* 弹出层 */
.popup-content {
  @include flex;
  align-items: center;
  /* 垂直居中对齐子元素（类似把物品垂直摆放在盒子中间） */
  justify-content: center;
  /* 水平居中对齐子元素（类似把物品水平摆放在盒子中间） */
  padding: 15px;
  background-color: #fff;
}

/* 列表 */
.top-list-title-gongyi {
  padding: 10px 40px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;

}

.top-list-title-item-gongyi {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #8f8a8a;
  padding: 5px 0px;

}

.top-list-title-item-gongyi-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #8f8a8a;
  padding-bottom: 1x;

}

.top-list-title-item-title {
  width: 100%;
}

.top-list-title-item-title-gongyi-left {
  width: 20px;
  /* 1. 设置固定宽度（根据最长标题调整） */
  padding-right: 30px;
  /* 2. 标题和内容之间保留间距 */
  white-space: nowrap;
  /* 3. 禁止标题文本换行 */
}

.top-list-title-item-title-gongyi-right {
  width: auto;
}

/* 最底部导航栏 */
.bottom {
  width: 100%;
  bottom: 0;
  position: fixed;
}

/* 按钮区域 */
.bottom-button {
  display: flex;
  flex-direction: row;
}

/* 确定按钮 */
.bottom-button-ok {
  text-align: center;
  line-height: 35px;

  min-width: 80px;
  width: auto;
  height: 35px;
  background-color: #98e0f6;
  border-radius: 30px;
}

/* 重置按钮 */
.bottom-button-reset {
  text-align: center;
  line-height: 35px;
  min-width: 80px;
  width: auto;
  height: 35px;
  background-color: #e6f079;
  border-radius: 30px;
}

/* 提交 */
.bottom-button-submit {
  text-align: center;
  line-height: 35px;
  min-width: 80px;
  width: auto;
  height: 35px;
  background-color: #88ff55;
  border-radius: 30px;
}

/* 中间文本区域 */
.bottom-text {
  text-align: center;
  color: crimson;
}

.bottom-nav {
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
  background-color: #caccc9;
  flex: 1;
}

.bottom-nav-title {
  height: 40px;
  width: 33%;
  text-align: center;
  /* background-color: #fff; */
  line-height: 40px;
}


/* 待处理的列表列表 */
.top-list-title-gongyi {
  padding: 10px 40px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;

}

.top-list-title-item-gongyi {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #8f8a8a;
  padding: 5px 0px;

}

.top-list-title-item-gongyi-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #8f8a8a;
  padding-bottom: 1x;

}
.top-list-title-item-title{
  width: 100%;
}
.top-list-title-item-title-gongyi-left {
  width: 20px;
  /* 1. 设置固定宽度（根据最长标题调整） */
  padding-right: 30px;
  /* 2. 标题和内容之间保留间距 */
  white-space: nowrap;
  /* 3. 禁止标题文本换行 */
}

.top-list-title-item-title-gongyi-right {
  width: auto;
}
</style>
